<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        canvas {
            display: block;

        }

        body {
            margin: 0px;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        var canvas = document.querySelector('canvas')
        var ctx = canvas.getContext('2d')
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        function randomColor() {
            var red = Math.floor(Math.random() * 255)
            var blue = Math.floor(Math.random() * 255)
            var green = Math.floor(Math.random() * 255)
            return 'rgb(' + red + ',' + green + ',' + blue + ')'
        }
        var textArr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k']

        function Text(i) {
            this.x = i * 20;
            this.y = 0;
            this.speed = 20
            this.color = randomColor()
            this.text = textArr[Math.floor(Math.random() * textArr.length)]
        }
        var arr = []
        for (var i = 0; i < canvas.width / 20; i++) {
            arr.push(new Text(i))
        }

        setInterval(function () {
            ctx.fillStyle = 'rgba(0,0,0,0.05)'
            ctx.fillRect(0, 0, canvas.width, canvas.height)

            for (var i = 0; i < arr.length; i++) {
                if (arr[i].y >= canvas.height) {
                    arr[i].y = 0
                    arr[i].speed = Math.random() * 10 + 10
                }
                ctx.beginPath()
                ctx.font = '20px 微软雅黑'
                ctx.fillStyle = arr[i].color;
                ctx.fillText("❤️", arr[i].x, arr[i].y)
                ctx.closePath()
                arr[i].y += arr[i].speed;
            }

        }, 1000 / 60)



    </script>
</body>

</html>